/**
 * @huanhuan
 * 受让详情
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    FlatList
} from 'react-native'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import AlertManager from '../../components/common/AlertManager'
import { toastShort, consoleLog } from '../../utils/utilsToast'
import ActivityIndicatorItem from '../../components/common/ActivityIndicatorItem'

import FooterComponent from '../../components/common/footerComponent'
import EmptyComponent from '../../components/common/emptyComponent'
export default class zhaunrangTransferDetatil extends Component {

    constructor(props) {
        super(props);
        const { params } = this.props.navigation.state;
        this.state =  {
            id: params.id, 
            dataSource: [],
            assigneeList: [],
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount() {
        this.requestDataSource()
    }

    requestDataSource = () => {
        let url = ServicesApi.transfer_transfer_order_detaile;
        let data = {
            id: 28
            // id: this.state.id,
        }
        console.log('id------------->', this.state.id)
        Services.post(url, data, true)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    console.log('result------------->', result)
                    this.setState({
                        dataSource: result.data.transfer_info,
                        assigneeList: result.data.assignee_list,
                    })
                }else{
                    toastShort(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    onBack = () => {
        this.props.navigation.state.params.onCallBack();
        this.props.navigation.goBack();
    }

    onPushNavigator = (compent) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            fund_id: this.state.id,
            onCallBack:()=>{
                console.log('1');
            }
        })
    }

    assigneeListView = () => {
        let {assigneeList} = this.state;
        if (!assigneeList || assigneeList.length < 1) return null;
        let content = assigneeList.map((item, index) => {
            return (
                <View key={index} style={styles.sss}>
                    
                    <View style={styles.footerCard}>
                        <View style={styles.footerCardTop}>
                            <Text style={styles.footerCardTopTitle}>受让单号：{item.order_sn}</Text>
                            <Text style={styles.footerCardToptype}>{item.status_text}</Text>
                        </View>
                        <View style={styles.footerCardBottom}>
                            <View style={styles.footerCardBottomLine}>
                                <Image source={require('../../assets/images/icons/icon_transfer_detatil1.png')} style={styles.footerCardBottomLineImg} />
                                <Text style={styles.footerCardBottomLineLeft}>转让份额</Text>
                                <Text style={styles.footerCardBottomLineRight}>{item.money}</Text>
                            </View>
                            <View style={styles.footerCardBottomLine}>
                                <Image source={require('../../assets/images/icons/icon_transfer_detatil2.png')} style={styles.footerCardBottomLineImg} />
                                <Text style={styles.footerCardBottomLineLeft}>份额收益（截至当前）</Text>
                                <Text style={[styles.footerCardBottomLineRight,{color: '#EA0000',}]}>{item.income_amount}元</Text>
                            </View>
                            <View style={styles.footerCardBottomLine}>
                                <Image source={require('../../assets/images/icons/icon_transfer_detatil3.png')} style={styles.footerCardBottomLineImg} />
                                <Text style={styles.footerCardBottomLineLeft}>受让总金额</Text>
                                <Text style={[styles.footerCardBottomLineRight,{color: '#EA0000'}]}>{item.amount}元</Text>
                            </View>
                            <View style={styles.assigneeBtnBox}>
                                <TouchableOpacity style={styles.assigneeBtn} onPress={() => this.onPressAssignee(item)}>
                                    <Text style={styles.assigneeBtnText}>确认转让</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                        
                </View>
            )
        })
        return (
            <View style={styles.footer}>
                <View style={styles.footerTitleBox}>
                    <Text style={styles.footerTitle}>受让申请列表</Text>
                </View>
                {content}
            </View>
        )
    }

    onPressAssignee = (item) => {
        const params = {
            title: '温馨提示',
            detail: '您确认该笔受让吗？',
            actions: [
                { title: '取消', titleStyle: {  }, actionStyle: {  }, onPress: () => {  } },
                { title: '确定', onPress: () => this.onAssignee(item) }
            ]
        }
        AlertManager.show(params)
    }

    onAssignee = (item) => {
        let url = ServicesApi.fund_order_yes;
        let data = {
            id: item.id,
        }
        Services.post(url, data, true)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    console.log('result------------->', result)
                    toastShort('已确认');
                    this.requestDataSource()
                }else{
                    toastShort(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
    }

    render(){
        let {dataSource, assigneeList} = this.state;
        return (
            <View style={styles.container}>

                <NavigationBar
                    title = {'转让详情'}
                    style = {styles.navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                />

                <View style={{flex: 1}}>
                    <ScrollView>

                        <View style={styles.header}>
                            <Text style={styles.headerText}>委托号： {dataSource.order_sn}</Text>
                            <Text style={styles.headerTypeText}>{dataSource.status_name}</Text>
                        </View>

                        <View style={styles.body}>
                            <View style={styles.bodyTitleBox}>
                                <Text style={styles.bodyTitle}>{dataSource.fund_order_info &&  dataSource.fund_order_info.fund_id_name}</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>业绩比较基准</Text>
                                <Text style={styles.bodyRight}>{dataSource.datum_rate}%</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>产品期限</Text>
                                <Text style={styles.bodyRight}>{dataSource.fund_order_info &&  dataSource.fund_order_info.time_limit}</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>委托时间</Text>
                                <Text style={styles.bodyRight}>{dataSource.create_time}</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>转让份额</Text>
                                <Text style={[styles.bodyRight,{color: '#EA0000',}]}>{dataSource.money}元</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>转让单价</Text>
                                <Text style={[styles.bodyRight,{color: '#EA0000',}]}>{dataSource.price}元</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>附带受益（截至今日）</Text>
                                <Text style={[styles.bodyRight,{color: '#EA0000',}]}>{dataSource.fund_order_info &&  dataSource.fund_order_info.income_amount}元</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>转让总价</Text>
                                <Text style={[styles.bodyRight,{color: '#EA0000',}]}>{dataSource.amount}元</Text>
                            </View>
                            <View style={styles.bodyLine}>
                                <Text style={styles.bodyLeft}>是否支持部分转让</Text>
                                <Text style={styles.bodyRight}>{dataSource.is_many_name}</Text>
                            </View>
                            <TouchableOpacity style={styles.bodyBtn} onPress={() => this.onPushNavigator('Order')}>
                                <Text style={styles.bodyBtnText}>返回列表</Text>
                            </TouchableOpacity>
                        </View>

                        {this.assigneeListView()}
                    </ScrollView>
                </View>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    // 整体
    container: {
        flex: 1,
        backgroundColor: GlobalStyles.bgColor,
    },
    navigationBar: {
        backgroundColor: '#fff',
        borderBottomColor: GlobalStyles.bgColor,
        borderBottomWidth: 1,
    },

    header: {
        height: 60,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 15,
        borderBottomColor: '#f2f2f2',
        borderBottomWidth: 1,
        backgroundColor: '#fff',
    },
    headerText: {
        color: '#333',
        fontSize: 12,
    },
    headerTypeText: {
        color: '#B48148',
        fontSize: 12,
        paddingVertical: 3,
        paddingHorizontal: 8,
        borderRadius: 5,
        backgroundColor: '#f0e6da',
    },
    body: {
        marginBottom: 10,
        backgroundColor: '#fff',
    },
    bodyTitleBox: {
        height: 50,
        paddingHorizontal: 15,
        justifyContent: 'center',
    },
    bodyTitle: {
        fontSize: 14,
        color: '#333',
    },
    bodyLine: {
        height: 50,
        paddingHorizontal: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    bodyBtn: {
        width: GlobalStyles.width - 30,
        height: 40,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#B48148',
        borderRadius: 5,
        marginHorizontal: 15,
        marginBottom: 15,
    },
    bodyBtnText: {
        color: '#fff',
        fontSize: 13,
    },
    bodyLeft: {
        fontSize: 12,
        color: '#666',
    },
    bodyRight: {
        fontSize: 12,
        color: '#333',
    },
    assigneeBtnBox: {
        alignItems: 'center',
    },
    assigneeBtn: {
        width: 150,
        height: 30,
        borderRadius: 5,
        backgroundColor: '#B48148',
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center',
    },
    assigneeBtnText: {
        color: '#fff',
        fontSize: 13,
    },

    footer: {
        backgroundColor: '#fff',
    },
    footerTitleBox: {
        height: 50,
        paddingHorizontal: 15,
        justifyContent: 'center',
    },
    footerTitle: {
        color: '#B48148',
        fontSize: 14,
    },
    footerCard: {
        marginHorizontal: 15,
        marginBottom: 15,
        borderWidth: 1,
        borderColor: '#f2f2f2',
        borderRadius: 5,
    },
    footerCardTop: {
        height: 50,
        paddingHorizontal: 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottomColor: '#f2f2f2',
        borderBottomWidth: 1,
    },
    footerCardTopTitle: {
        color: '#333',
        fontSize: 13,
    },
    footerCardToptype: {
        color: '#B48148',
        fontSize: 12,
        backgroundColor: '#f0e6da',
        paddingVertical: 3,
        paddingHorizontal: 6,
        borderRadius: 3,
    },
    footerCardBottom: {
        paddingHorizontal: 10,
    },
    footerCardBottomLine: {
        height: 40,
        flexDirection: 'row',
        // justifyContent: 'space-between',
        alignItems: 'center',
    },
    footerCardBottomLineImg: {
        width: 15,
        height: 15,
        marginRight: 5,
    },
    footerCardBottomLineLeft: {
        color: '#666',
        fontSize: 12,
    },
    footerCardBottomLineRight: {
        color: '#333',
        fontSize: 12,
        flex: 1,
        textAlign: 'right',
    },
});




            







